<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你的个人能量地图</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Serif SC', serif;
            background-color: #F8F5F2;
            color: #3D3D3D;
        }
        .fade-in-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .hero-text {
            text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
        }
        .card {
            background-color: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body class="leading-relaxed">

    <!-- Header Section -->
    <header class="h-screen w-full flex flex-col justify-center items-center text-center p-4 fade-in-section is-visible">
        <div class="max-w-2xl">
            <h1 class="text-4xl md:text-5xl font-bold hero-text text-gray-800">你的个人能量地图</h1>
            <p class="mt-4 text-lg md:text-xl text-gray-600 hero-text">一份来自你内心的声音</p>
            <div class="mt-8 animate-bounce">
                <svg class="w-6 h-6 text-gray-500 mx-auto" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                    <path d="M19 9l-7 7-7-7"></path>
                </svg>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="w-full">
        <!-- Introduction -->
        <section class="max-w-3xl mx-auto px-6 py-16 md:py-24 text-center fade-in-section">
            <h2 class="text-2xl md:text-3xl font-bold mb-4">你好，勇敢的记录者</h2>
            <p class="text-base md:text-lg text-gray-700">
                感谢你分享的这些珍贵的“咔咔”瞬间。在翻阅它们时，我看到的不是一堆杂乱的念头，而是一场在你内心深处，正在上演的拔河比赛。绳子的一端，渴望着安稳的港湾；另一端，向往着远方的星辰。这份报告，就是为了让你看清这两股同样属于你的、强大的力量。
            </p>
        </section>

        <!-- Section 1: Harbor Keeper -->
        <section class="py-16 md:py-24 fade-in-section">
            <div class="max-w-5xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
                <div class="order-2 md:order-1">
                    <h3 class="text-3xl md:text-4xl font-bold mb-4">港湾守护者</h3>
                    <p class="text-lg text-gray-700">
                        他的关键词是安稳、轻松、确定。他渴望为你打造一个温暖、安全的避风港。当你说“上班能轻松点就好了”，或是想要“断舍离”时，都是他在轻声告诉你：“嘿，停下来歇歇吧，安全最重要。” 他是你内心强大的“稳定器”，是你所有安全感的来源。
                    </p>
                </div>
                <div class="order-1 md:order-2">
                    <img src="https://i.postimg.cc/500rQB3k/image.png" alt="[一位女孩在窗边安静读书，窗外是发出柔光的灯塔]" class="rounded-lg shadow-xl w-full h-auto">
                </div>
            </div>
        </section>

        <!-- Section 2: Star Voyager -->
        <section class="py-16 md:py-24 bg-gray-800 text-white fade-in-section">
            <div class="max-w-5xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
                <div>
                     <img src="https://i.postimg.cc/7PzF3V4p/image.png" alt="[一位女孩站在船头，眺望星辰大海]" class="rounded-lg shadow-xl w-full h-auto">
                </div>
                <div>
                    <h3 class="text-3xl md:text-4xl font-bold mb-4">星辰航海家</h3>
                    <p class="text-lg text-gray-200">
                        他的关键词是改变、探索、可能性。他总是眺望着远方的地平线，渴望开启一段全新的旅程。当你说“人生能像游戏一样就好了”，或是对AI和自媒体感到好奇时，都是他在你耳边低语：“看，外面有更精彩的世界，我们出发吧！” 他是你内心渴望成长的“引擎”，是你所有梦想的源头。
                    </p>
                </div>
            </div>
        </section>

        <!-- Section 3: Center of the Storm -->
        <section class="py-16 md:py-24 fade-in-section">
            <div class="max-w-3xl mx-auto px-6 text-center">
                <img src="https://i.postimg.cc/rsGZvfFs/image.png" alt="[一位女孩蜷缩在小船里，周围是两种不同颜色的海流交汇形成的漩涡]" class="rounded-lg shadow-xl w-full h-auto max-w-md mx-auto mb-8">
                <h3 class="text-3xl md:text-4xl font-bold mb-4">风暴的中心</h3>
                <p class="text-lg text-gray-700">
                    你之所以感到疲惫和内耗，是因为你的“守护者”和“航海家”正在进行一场激烈的拔河。“守护者”想让你安全，“航海家”想让你远征。这两股同样宝贵的力量，在你心里对抗，这就是你所有精神内耗的真相。
                </p>
            </div>
        </section>

        <!-- Section 4: The First Chart -->
        <section class="py-16 md:py-24 fade-in-section">
            <div class="max-w-5xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
                <div class="order-2 md:order-1">
                    <h3 class="text-3xl md:text-4xl font-bold mb-4">第一份航海图</h3>
                    <p class="text-lg text-gray-700">
                        你不需要在这两者中二选一。真正的成长，是整合。我们不需要立刻决定是否远航，但可以先在港湾里，为那艘远征船，做一次小小的“设备升级”。这个“微小实验”——比如动手制作那个旅行视频——就是你的第一份航海图。它既安全，又是一次探索。
                    </p>
                </div>
                <div class="order-1 md:order-2">
                     <img src="https://i.postimg.cc/c1fzgLMW/image.png" alt="[一位女孩专注地看着一张发光的航海图]" class="rounded-lg shadow-xl w-full h-auto">
                </div>
            </div>
        </section>

        <!-- Section 5: The Integrated Self -->
        <section class="py-16 md:py-24 bg-gray-800 text-white fade-in-section">
            <div class="max-w-3xl mx-auto px-6 text-center">
                <img src="https://i.postimg.cc/BQgwp7Vw/image.png" alt="[一位女孩手持灯笼和船舵，背景一半是港湾灯塔，一半是星空]" class="rounded-lg shadow-xl w-full h-auto max-w-md mx-auto mb-8">
                <h3 class="text-3xl md:text-4xl font-bold mb-4">你是港湾，也是远征</h3>
                <p class="text-lg text-gray-200">
                    请记住，你没有做错任何事。你只是同时拥有了两种宝贵的能量。当你学会不再让它们彼此对抗，而是让它们携手合作时，你真正的航行，才刚刚开始。你既是温暖的港湾，也是勇敢的远征。
                </p>
            </div>
        </section>

    </main>

    <!-- Footer -->
    <footer class="text-center py-8 px-4">
        <p class="text-gray-500">祝你，航行愉快。</p>
    </footer>

    <script>
        // This script handles the fade-in animation on scroll
        const sections = document.querySelectorAll('.fade-in-section');

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-visible');
                }
            });
        }, {
            threshold: 0.1 // Trigger when 10% of the element is visible
        });

        sections.forEach(section => {
            observer.observe(section);
        });
    </script>

</body>
</html>
